<template>
  <div class="vipwarp">
    <div v-show="inload" style="position:absolute;width:100%;height:100%;background:white;display:flex;justify-content:center;align-items:center;z-index:100;">
<vue-loading  type="spiningDubbles" color="#d9544e" style="width:10%;height:10%;position:absolute;background:white;z-index:100;" :size="{ width: '50px', height: '50px' }"></vue-loading>
    </div>
    <!--不是会员-->
      <div class="notvip" v-if="notvip&&notlogin">
          <div class="tiptop">
          <img src="static/img/search_expression.png" alt="">
          <p>您还不是vip哦!!</p>
          </div>
          <div class="vipcontrol">
              <div class="generatevip" @click="tonewlogin">
                  开通vip
              </div>
              <div class="bindvip" @click="tooldlogin">
                  绑定至已开通vip
              </div>
              </div>
      </div>


      <!--已是会员-->
      <div class="isvip" v-if="!notvip&&notlogin">
          <div class="isviptop" :style="background2">
          <h3>欢迎您，{{sellername}}会员{{vipname}}</h3>
          <div>
          <p>{{vipmoney | two}}</p>
          <span>余额（元）</span>
          <span @click="changerecord">充值记录</span>
          </div>
          </div>
          <div class="isvipdetail">
              <!--<p><span>会员等级</span><span>lv 5</span></p>-->
              <p><span>所属餐厅</span><span>{{sellername}}</span></p>
              <p><span>会员名称</span><span>{{vipname}}</span></p>
              <div class="isvipdetailbottom">
              <div class="isvipcard" @click="torechargre">
                  会员充值
              </div>
              <div class="isvipactivity" @click="showconsum">
                  消费记录
              </div>
              </div>
          </div>
      </div>


      <!--消费记录-->
      <div class="consum" v-if="whetherconsum" >
        <div v-show="consumload" style="position:absolute;width:100%;height:100%;background:white;display:flex;justify-content:center;align-items:center;z-index:100;">
<vue-loading  type="spiningDubbles" color="#d9544e" style="width:10%;height:10%;position:absolute;background:white;z-index:100;" :size="{ width: '50px', height: '50px' }"></vue-loading>
    </div>
    <div class="consumwarp"  ref="cscroll22">
    <ul>
      <li v-for="(item,index) in consumdata" :key="index">
        <p><span>消费金额:{{item.viporderOrdermaney}}</span><span>消费后余额:{{item.viporderYue}}</span></p>
        <p><span>消费时间</span><span>{{item.viporderDate}}</span></p>
      </li>
      <p v-if="showjiazai1" style="font-size:0.3rem;line-height:0.6rem;">加载中</p>
    </ul>
    </div>
    <div class="goback"  @click="changeconsum">
          返回
        </div>
      </div>

      <!--充值记录-->
      <div class="record"  v-if="whetherrecord">
        <div v-show="recordload" style="position:absolute;width:100%;height:100%;background:white;display:flex;justify-content:center;align-items:center;z-index:100;">
<vue-loading  type="spiningDubbles" color="#d9544e" style="width:10%;height:10%;position:absolute;background:white;z-index:100;" :size="{ width: '50px', height: '50px' }"></vue-loading>
    </div>
    <div class="rechargrewar"  ref="record1">
        <ul>
            <li v-for="(item,index) in rechargredata" :key="index">
              <p><span>付款金额:{{item.rechargeMoney}}</span><span>实得金额:{{item.rechargeAll}}</span></p>
            <p><span>充值后余额</span><span>{{item.rechargeYue}}</span></p>
            <p><span>充值时间</span><span>{{item.rechargeDate}}</span></p>
            </li>
              <p v-if="showjiazai2" style="font-size:0.3rem;line-height:0.6rem;">加载中</p>
        </ul>
    </div>
        <div class="goback"  @click="changerecord1">
          返回
        </div>
      </div>


      <!--会员充值-->
      <div class="viprechargre" v-show="whetherrechargre">
        <div v-show="rechargreload" style="position:absolute;width:100%;height:100%;left:0;top:0;background:white;display:flex;justify-content:center;align-items:center;z-index:100;">
<vue-loading  type="spiningDubbles" color="#d9544e" style="width:10%;height:10%;position:absolute;background:white;z-index:100;" :size="{ width: '50px', height: '50px' }"></vue-loading>
    </div>
          <p><span>充值商家</span><span>{{sellername}}</span></p>
          <p><span>会员名称</span><span>{{vipname}}</span></p>
          <h4>优惠卡卷</h4>
          <ul>
              <li v-for="(item,index) in discount" :class="{'chosed':index==chosedwhich}" @click="makesure(item,index)" :key="index" :style="background">
                  冲{{item.discountChargeMoney}}
                  送{{item.discountAddMoney}}元
              </li>
          </ul>
          <div class="rechargrenow" @click="rechargre">
          立即充值
          </div>
          <div class="back" @click="backrechargre" >
                  返回
              </div>
      </div>


      <div class="login" v-if="!notlogin">
<vue-loading v-show="showload" type="spiningDubbles" color="#d9544e" style="width:10%;height:10%;padding:45% 45%;position:absolute;background:white;" :size="{ width: '50px', height: '50px' }"></vue-loading>
              <!--会员注册-->
          <div class="loginnew" v-if="logintype==1">
              <label for="name">姓名:</label>
              <input type="text" v-model="loginusername" name="name" placeholder="请输入姓名">
              <p><label for="phone">电话:</label>
              <input type="text" v-model="loginphone" name="phone" placeholder="请输入电话">
              <i></i>
              <span @click="sendvalidate(1)">{{validatetime}}</span>
              </p>
              <label for="validate">验证码:</label>
              <input type="text" v-model="validate" name="validate" placeholder="输入您收到的验证码">
              <div class="tologin" @click="register">
                  立即注册
              </div>
              <div class="back" @click="backnotvip" >
                  返回
              </div>
          </div>


          <!--会员绑定-->
          <div class="loginold" v-if="logintype==2">
              <p><label for="phone">电话:</label>
              <input type="text" v-model="phone2" name="phone" placeholder="请输入电话">
              <i></i>
              <span @click="sendvalidate(0)">{{validatetime}}</span>
              </p>
              <label for="validate">验证码:</label>
              <input type="text" v-model="code" name="validate" placeholder="输入您收到的验证码">
              <div class="tologin" @click="bindvip">
                  立即绑定
              </div>
              <div class="back" @click="backnotvip" >
                  返回
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import xiala from './xiala'
import BScroll from 'better-scroll'
import vueLoading from 'vue-loading-template'
import qs from 'qs'
import axios from 'axios'

var cscroll
/*setTimeout(function(){
sessionStorage.baseurl="http://192.168.188.29:8080/fkoufu/a/phone/"
sessionStorage.sellerid='a9c96f956fd1499a9d5c4625c2905e5a'
sessionStorage.openid="2088002117142303"
sessionStorage.token="1212121212121"
sessionStorage.payType="2"
},100)*/

export default {
  data(){
      return{
          showload:false,//是否显示加载中
          rechargreargs:'',
          showjiazai1:false,
          showjiazai2:false,
          bottomText: '上拉加载更多...',
          allLoaded: false,
          inload:true,
          scrolly:0,
          scrollyre:0,
          recharlastdata:'',
          recharpage:1,
          chosedwhich:0,
          lastdata:'',
          consumepage:1,
          recordload:true,
          rechargreload:true,
          rechargredata:[{
            time:'',
            getmoney:'',
            paidmoney:'',
            balance:''
          }],
          consumdata:[
            {}
          ],
          discount:[
            {
              paidmoney:100,
              discountmoney:2
            }
          ],
          scrolly:'',
          notvip:false,  //是否是vip
          vipname:'',//vip姓名
          vipmoney:0,//会员余额
          sellername:'',//餐厅姓名
          notlogin:true,  //是否注册或绑定会员
          logintype:2, //会员注册还是绑定
          loginusername:'',  //会员注册的姓名
          loginphone:"",//会员注册时的电话
          validate:'',//会员注册时的验证码
          phone2:'',//会员绑定时的电话
          code:'', //会员绑定时的验证码
          cansend:true,//能否重复发送验证码
          sendinterval:'',//验证码倒计时定时器
          validatetime:'验证码',//验证码倒计时显示
          whetherrecord:false,//是否查看充值记录
          whetherconsum:false,
          consumload:true,
          whetherrechargre:false,//是否充值
          background:{        //会员卡背景图片
            backgroundImage:"url(" + require("../../static/img/vip2.png") + ")",
            backgroundSize:"100% 100%"
            },
          background2:{
            backgroundImage:"url(" + require("../../static/img/timg.jpg") + ")",
            backgroundSize:"100% 100%"
          }
      }
  },
  methods:{
      backnotvip:function(){
          this.notlogin=true
      },


      /**查看消费记录 */
      showconsum:function(){
        this.scrolly=0;
        this.consumepage=1
        var _this=this
        this.whetherconsum=true
        this.consumload=true
        axios.post(sessionStorage.baseurl+'/a/phone/vipOrder',qs.stringify({pageNo:_this.consumepage,pageSize:10,sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,type:sessionStorage.payType}))
        .then(res=>{
          if(res.data.code==1){
            _this.consumdata=res.data.data
            _this.lastdata=res.data.data
            _this.consumload=false
            setTimeout(function(){
              _this.consumescroll()
            })
            
          }
          else{
            alert(res.data.msg)
          }
        })
        .catch(error=>{
          alert(error)
        })
      },

      /**检查是否是会员 */
      checkvip:function(){
       this.inload=true
        var _this=this
        axios.post(sessionStorage.baseurl+'/a/phone/judgeVIP',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,type:sessionStorage.payType}))
        .then(res=>{
          if(res.data.code==1){
            _this.notvip=false
            _this.inload=false
            _this.vipname=res.data.data.VIPName
            _this.sellername=res.data.data.sellerName
            _this.vipmoney=res.data.data.vipMoney
          }
          else if(res.data.code==2){
            _this.notvip=true
            _this.inload=false
          }
          else{
            alert(res.data.msg)
          }
        })
        .catch(error=>{
          alert(error)
        })
      },

      /**充值函数 */
      rechargre:function(){
        var _this=this
        if(_this.discount==undefined){
        	alert("该商家没有会员活动，，，无法充值")
        	return
        }
        this.inload=true
        axios.post(sessionStorage.baseurl+'/a/phone/saveRecharge',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,type:sessionStorage.payType,money:parseFloat(_this.discount[_this.chosedwhich].discountChargeMoney).toFixed(2)}))
        .then(res=>{
          if(res.data.code==1){
            _this.rechargreargs=res.data.data;
            if(sessionStorage.payType==1){
              _this.alijsApiCall()
            }
            else if(sessionStorage.payType==2){
              _this.callpay()
            }
          }
          else{
            alert(res.data.msg)
             _this.inload=false
          }
        })
        .catch(error=>{
          alert(error)
           _this.inload=false
        })
      },


      backrechargre:function(){
        this.whetherrechargre=!this.whetherrechargre
      },

      /*绑定vip函数 */
      bindvip:function(){
        var _this=this
        _this.showload=true
        axios.post(sessionStorage.baseurl+'/a/phone/jiaoyan',qs.stringify({phoneNum:_this.phone2,sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,code:_this.code}))
        .then(res=>{
          if(res.data.code==1){
            axios.post(sessionStorage.baseurl+'/a/phone/bangdinghuiyuan',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,phoneNum:_this.phone2,type:sessionStorage.payType}))
            .then(res=>{
              if(res.data.code==1){
                _this.checkvip()
                _this.showload=false
                _this.notlogin=true
              }
              else{
                alert(res.data.msg)
                _this.showload=false
                _this.notlogin=true
              }
            })
            .catch(error=>{
              alert(error)
              _this.showload=false
            })
          }
          else{
            alert(res.data.msg)
            _this.showload=false
          }
        })
        .catch(error=>{
          alert(error)
          _this.showload=false
        })
      },

      /**会员支付所有函数 */

      callpay:function(){    
				var _this=this
			if (typeof WeixinJSBridge == "undefined") {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', _this.jsApiCall, false)
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', _this.jsApiCall)
					document.attachEvent('onWeixinJSBridgeReady', _this.jsApiCall)
				}
			} else {
				_this.jsApiCall()
			}
			},
			jsApiCall:function(){
			var _this=this
			var info = JSON.parse(_this.rechargreargs)
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',{
					"appId":info.appId.toString(),
					"nonceStr":info.nonceStr.toString(),
					"package":info.package1.toString(),
					"paySign":info.paySign.toString(),
					"signType":info.signType.toString(),
					"timeStamp":info.timeStamp.toString()
				},
				function(res) {
					if(res.err_msg == "get_brand_wcpay_request:ok" ){
            _this.backrechargre()
            _this.checkvip()
					}else{
							alert('支付失败');
							_this.inload=false
							}
				}
				);
			},
			alijsApiCall:function(){
				var _this=this
				var info = JSON.parse(_this.rechargreargs)
					AlipayJSBridge.call("tradePay", {
						"tradeNO": info.tradeNO.toString()
				}, function(result) {
					if (result.resultCode == '9000') {
						_this.backrechargre()
            _this.checkvip()
					} else {
							alert('支付失败');
							_this.inload=false
					}
				});
			},

      /*注册函数*/ 
      register:function(){
        var _this=this
        _this.showload=true
        axios.post(sessionStorage.baseurl+'/a/phone/jiaoyan',qs.stringify({phoneNum:_this.loginphone,sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,code:_this.validate,token:sessionStorage.token}))
        .then(res=>{
          if(res.data.code==1){
            axios.post(sessionStorage.baseurl+'/a/phone/saveVIP',qs.stringify({sellerid:sessionStorage.sellerid,token:sessionStorage.token,VIPName:_this.loginusername,type:sessionStorage.payType,openid:sessionStorage.openid,phoneNum:_this.loginphone}))
            .then(res=>{
              if(res.data.code==1){
                _this.checkvip()
                _this.notlogin=true
                _this.showload=false
                
              }
              else{

                alert(res.data.msg)
                _this.notlogin=true
                _this.showload=false
              }
            })
            .catch(error=>{
              alert(error)
              _this.showload=false
            })
          }
          else{
            alert(res.data.msg)
            _this.notlogin=true
            _this.showload=false
          }
        })
        .catch(error=>{
          alert(error)
          _this.showload=false
        })
      },

      /*绑定和注册的发送验证码*/ 
      sendvalidate:function(index){
        var phonenumber=''
        if(!this.cansend){
          return
        }
        if(index==1){
          if(this.loginphone==''){
          alert("未填写电话号码")
          return
        }
        if(!this.isphone(this.loginphone)){
          alert("请输入正确的电话号码")
          return
        }
        phonenumber=this.loginphone
        }
          else if(index==0){
            if(this.phone2==''){
          alert("未填写电话号码")
          return
        }
        if(!this.isphone(this.phone2)){
          alert("请输入正确的电话号码")
          return
        }
        phonenumber=this.phone2
          }
        var _this=this
         _this.validatetime=60;
        axios.post(sessionStorage.baseurl+"/a/phone/getcode",qs.stringify({phoneNum:phonenumber,sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token}))
        .then(res=>{
          if(res.data.code==1){
             _this.cansend=false
            _this.validateinterval=setInterval(function(){
                  _this.validatetime--;
                  if(_this.validatetime==0){
                    _this.validatetime="验证码"
                    clearInterval(_this.validateinterval)
                    _this.cansend=true
                  }
                },1000)
          }
          else{
            alert(res.data.msg)
          }
        })
        .catch(error=>{
          alert(error)
        })
      },


      /*获取充值记录函数 */
      changerecord:function(){
        this.scrollyre=0
        this.recharpage=1
        var _this=this
        _this.recordload=true
        this.whetherrecord=!this.whetherrecord;
        axios.post(sessionStorage.baseurl+'/a/phone/getVIPRecharge',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,pageNo:_this.recharpage,pageSize:10,type:sessionStorage.payType}))
        .then(res=>{
          if(res.data.code==1){
           console.log(res.data.data)
            _this.rechargredata=res.data.data
            _this.recharlastdata=res.data.data
            _this.recordload=false
            _this.$nextTick(function(){
              _this.recharscroll()
                  })
                  }
                 else{
                      alert(res.data.msg)
                   _this.recordload=false
                   }
                 })
                  .catch(error=>{
                   alert(error)
                   _this.recordload=false
                 })
      },
      tonewlogin:function(){
          this.notlogin=false
          this.logintype=1
      },
      changerecord1:function(){
        this.whetherrecord=!this.whetherrecord;
      },
      tooldlogin:function(){
          this.notlogin=false
          this.logintype=2
      },
      isphone:function(phone){
        var pattern = /^1[34578]\d{9}$/; 
        return pattern.test(phone);
      },
      makesure:function(item,index){
        this.chosedwhich=index
      },
      /**消费记录滚动 */
      consumescroll:function(){
        var _this=this
          cscroll=new BScroll(_this.$refs.cscroll22,{
	    			click:true
          })
          cscroll.on('touchend',function(position){
            if(position.y < (cscroll.maxScrollY - 30)){
            	_this.showjiazai1=true
              _this.scrolly=cscroll.absStartY
              _this.consumepage++
             
              axios.post(sessionStorage.baseurl+'/a/phone/vipOrder',qs.stringify({pageNo:_this.consumepage,pageSize:10,sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,type:sessionStorage.payType}))
        .then(res=>{
          if(res.data.code==1){
            if(_this.lastdata[0].viporderDate==res.data.data[0].viporderDate){
              alert("已加载全部数据")
              _this.showjiazai1=false
              return
            }
            _this.lastdata=res.data.data
            _this.consumdata=_this.consumdata.concat(res.data.data)
            _this.consumload=false
            setTimeout(function(){
              _this.consumescroll()
              cscroll.scrollTo(0,_this.scrolly)
              _this.showjiazai1=false
            })
            
          }
          else{
            alert(res.data.msg)
          }
        })
        .catch(error=>{
          alert(error)
        })
            }
          })
      },



      /**充值记录滚动 */
      recharscroll:function(){
        var _this=this
         _this.menuScroll=new BScroll(_this.$refs.record1,{
	    			click:true
          });
          console.log(_this.menuScroll)
          _this.menuScroll.on('touchend',function(position){
            if(position.y < (_this.menuScroll.maxScrollY - 30)){
              _this.showjiazai2=true,
              _this.scrollyre=_this.menuScroll.absStartY;
              _this.recharpage++
                       axios.post(sessionStorage.baseurl+'/a/phone/getVIPRecharge',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,pageNo:_this.recharpage,pageSize:10,type:sessionStorage.payType}))
                  .then(res=>{
                   if(res.data.code==1){
                    console.log(res.data.data)
                    
                    if(_this.recharlastdata[0].rechargeDate==res.data.data[0].rechargeDate){
                      alert("已加载全部数据")
                      _this.showjiazai2=false
                      return
                    }
                    _this.recharlastdata=res.data.data
                     _this.rechargredata=_this.rechargredata.concat(res.data.data)
                     _this.recordload=false
                     _this.$nextTick(function(){
                     _this.recharscroll()
                   _this.menuScroll.scrollTo(0,_this.scrollyre)
                   _this.showjiazai2=false
                 })
                   }
                   else{
                     alert(res.data.msg)
                   _this.recordload=false
                    }
                  })
                 .catch(error=>{
                   alert(error)
                   _this.recordload=false
                 })
                      }
                   })
      },
      /*退出消费记录页面*/
      changeconsum:function(){
        this.whetherconsum=false
      },

      /**获取商家充值优惠活动列表 */
      torechargre:function(){
        var _this=this
        _this.rechargreload=true;
        this.whetherrechargre=!this.whetherrechargre
        axios.post(sessionStorage.baseurl+'/a/phone/getDiscount',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token}))
        .then(res=>{
          if(res.data.code==1){
            _this.discount=res.data.data
            _this.rechargreload=false;
          }
          else{
            alert(res.data.msg)
            _this.rechargreload=false;
          }
        })
        .catch(error=>{
          alert(error)
          _this.rechargreload=false;
        })
      }
  },
  mounted:function(){
    var _this=this
    setTimeout(function(){
      _this.checkvip()
    })
    
  },
  filters:{
    two:function(data){
      return parseFloat(data).toFixed(2)
    }
  },
  components:{
    vueLoading,
    xiala
  }
}
</script>


<style lang="stylus" scoped>
.vipwarp
  width 100%
  flex 1
  position relative
  .consum
    position absolute
    background white
    width 100%
    height 100%
    div.consumwarp
      width 100%
      height 100%
      overflow hidden
    .goback
      position absolute
      width 100%
      z-index 100%
      height 1rem
      line-height 1rem
      font-size 0.3rem
      color white
      bottom 0
      background rgba(150,150,150,0.3)
    ul
      overflow auto
      width 100%
      li
        width 100%
        box-sizing border-box
        padding 0.1rem 0.2rem
        border-bottom 0.2rem solid #ddd
        p
          width 100%
          overflow auto
          span
            float left
            line-height 0.6rem
            font-size 0.3rem
            &:last-child
              float right
  .record
    position absolute
    background white
    width 100%
    height 100%
    overflow hidden
    div.rechargrewar
      width 100%
      height 100%
      overflow hidden
    .goback
      position absolute
      width 100%
      z-index 100%
      height 1rem
      line-height 1rem
      font-size 0.3rem
      color white
      bottom 0
      background rgba(150,150,150,0.3)
    ul
      overflow auto
      width 100%
      li
        width 100%
        box-sizing border-box
        padding 0.1rem 0.2rem
        border-bottom 0.2rem solid #ddd
        p
          width 100%
          overflow auto
          span
            float left
            line-height 0.6rem
            font-size 0.3rem
            &:last-child
              float right
  .viprechargre
    position absolute
    background white
    width 100%
    height 100%
    box-sizing border-box
    padding 0.2rem 0.3rem
    p
      width 100%
      overflow auto
      margin-top 0.1rem
      span 
        float left
        display block
        font-size 0.3rem
        line-height 0.6rem
        &:last-child
          float right
    h4
      width 100%
      text-align left
      height 1rem
      font-size 0.3rem
      line-height 1rem
    .rechargrenow
      width 100%
      height 1rem
      line-height 1rem
      font-size 0.3rem
      margin-top 0.5rem
      text-align center
      background #23d822e0
      color white
    .back
        width 100%
        margin-top 1rem
        float left
        text-align center
        font-size 0.4rem
        color #ddd
        line-height 0.8rem
    ul
      overflow auto
      padding 0.1rem
      li
        width 35%
        float left
        font-size 0.3rem
        line-height 0.6rem
        height 1.5rem
        margin-left 10%
        color yellow
        box-sizing border-box
        margin-top 0.2rem
      li.chosed
        box-sizing border-box
        transform scale(1.1)
  .isvip
    position absolute
    width 100%
    height 100%
    .isviptop
      width 100%
      height 40%
      background white
      display flex
      flex-direction column
      justify-content space-around
      align-items center
      h3
        font-size 0.3rem
        line-height 0.6rem
        color #ddd
      div
        p
          text-align center
          font-size 0.6rem
          line-height 1rem
          color #db2244
        span
          display block
          font-size 0.25rem
          line-height 0.6rem
          &:last-child
            text-decoration underline
    .isvipdetail
      width 100%
      height 60%
      background white
      display flex
      flex-direction column
      p
        width 100%
        flex-basis 1rem
        padding 0 0.5rem
        box-sizing border-box
        span
          float left
          font-size 0.3rem
          line-height 1rem
          display block
          height 100%
          &:last-child
            float right
      .isvipdetailbottom
        width 100%
        flex 1
        display flex
        justify-content space-around
        align-items center
        div
          width 2rem
          height 1rem
          background white
          text-align center
          line-height 1rem
          border 0.01rem solid #ddd
          border-radius 0.3rem
          font-size 0.3rem
  .login
    position absolute
    width 100%
    background white
    height 100%
    display flex
    justify-content center
    align-items center
    .loginold
      width 90%
      box-sizing border-box
      background white
      overflow auto
      padding 1rem 0.1rem
      .tologin
        width 100%
        margin-top 1rem
        float left 
        text-align center
        font-size 0.32rem
        height 0.8rem
        line-height 0.8rem
        color white
        background #23d822e0
      .back
        width 100%
        margin-top 1rem
        float left
        text-align center
        font-size 0.4rem
        color #ddd
        line-height 0.8rem
      p
        width 100%
        margin-top 0.3rem
        height 0.8rem
        float left
        label
          width 30%
          height 0.7rem
          margin-top 0
          line-height 0.7rem
          text-align center 
          font-size 0.3rem
          float left
        input
          width 40%
          margin-top 0
          border 0.01rem solid #ddd
          box-sizing border-box
          height 0.7rem
          font-size 0.3rem
          float left
          text-align center
        i
          width 3%
          display block
          height 0.7rem
          box-sizing border-box
          border-left 0.01rem solid #dddddd
          float left
          margin-left 3% 
        span 
          display block
          box-sizing border-box
          border 0.01rem solid #ddd
          border-radius 0.2rem
          float left
          font-size 0.3rem
          height 0.7rem
          line-height 0.7rem
          width 24%
      label
        width 30%
        margin-top 0.3rem
        height 0.7rem
        text-align center 
        font-size 0.3rem
        line-height 0.7rem
        float left
      input
        width 70%
        border-radius 0.3rem
        margin-top 0.3rem
        border 0.01rem solid #ddd
        text-align center
        box-sizing border-box
        height 0.7rem
        font-size 0.3rem
        float left
    .loginnew
      width 90%
      box-sizing border-box
      background white
      overflow auto
      padding 0 0.1rem
      .back
        width 100%
        margin-top 1rem
        float left
        text-align center
        font-size 0.4rem
        color #ddd
        line-height 0.8rem
      .tologin
        width 100%
        margin-top 1rem
        float left 
        text-align center
        font-size 0.32rem
        height 0.8rem
        line-height 0.8rem
        color white
        background #23d822e0
      p
        width 100%
        margin-top 0.3rem
        height 0.8rem
        float left
        label
          width 30%
          height 0.7rem
          margin-top 0
          line-height 0.7rem
          text-align center 
          font-size 0.3rem
          float left
        input
          width 40%
          margin-top 0
          border 0.01rem solid #ddd
          box-sizing border-box
          height 0.7rem
          font-size 0.3rem
          float left
          text-align center
        i
          width 3%
          display block
          height 0.7rem
          box-sizing border-box
          border-left 0.01rem solid #dddddd
          float left
          margin-left 3% 
        span 
          display block
          box-sizing border-box
          border 0.01rem solid #ddd
          border-radius 0.2rem
          float left
          font-size 0.3rem
          height 0.7rem
          line-height 0.7rem
          width 24%
      label
        width 30%
        margin-top 0.3rem
        height 0.7rem
        text-align center 
        font-size 0.3rem
        line-height 0.7rem
        float left
      input
        width 70%
        border-radius 0.3rem
        margin-top 0.3rem
        border 0.01rem solid #ddd
        text-align center
        box-sizing border-box
        height 0.7rem
        font-size 0.3rem
        float left
  .notvip
    width 100%
    height 100%
    background white
    position absolute
    .vipcontrol
      width 100%
      height 40%
      display flex
      flex-direction row
      justify-content space-around
      align-items center
      div
        width 3rem
        background white
        line-height 1rem
        border-radius 0.2rem
        text-align center
        border 1px solid #ddd
        font-size 0.3rem
    .tiptop
      width 100%
      background white
      height 60%
      display flex
      flex-direction column
      justify-content center
      align-items center
      img
        width 4rem
      p
        font-size 0.3rem
        line-height 0.7rem
</style>
